import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'

export interface State {
    hiddenTargets: Set<string>
}

// define injection key
export const key: InjectionKey<Store<State>> = Symbol()

// define your own `useStore` composition function
export function useStore() {
    return baseUseStore(key)
}

export const store = createStore<State>({
    state() {
        return {
            allowDragging: false,
            // 已经被隐藏的LayoutItem。
            // 其本身包含的LayoutContent会被发送到empty-slot中
            // 等待下次再显示。
            hiddenTargets: new Set<string>()
        }
    },
    getters: {},
    mutations: {
        hideTarget(state, targetID: string) {
            if (state == null) {
                return
            }
            
            state.hiddenTargets.add(targetID)
        }
    },
    actions: {},
    modules: {}
}
)
